<template>
<div class="app">
  <div class="goodsheader">
        <div class="Back">
          <img src="../assets/img/back.png" alt="" @click="back()">
        </div>
        <div class="nav">
            <ul >
                <li @click="sp(index)" class="sp" v-for="(item,index) in tab" :class="index===show?'active':''">{{item.name}}</li>
            </ul>
        </div>
        <router-link to="/ShopCar"><div class="shopcar"></div></router-link>
    </div>
    <commodity v-show="show===0"></commodity>
    <circumstance v-show="show===1"></circumstance>
    <appraise v-show="show===2"></appraise>
</div>
</template>

<script>
import commodity from "@/components/commodity.vue"
import circumstance from "@/components/circumstance.vue"
import appraise from "@/components/appraise.vue"
export default {
  data() {
    return {  
      show:0,
      tab: [
        { name: "商品" }, 
        { name: "详情" }, 
        { name: "评论" } 
      ]
    };
  },
  components:{
        commodity:commodity,
        circumstance:circumstance,
        appraise:appraise   
    },
  methods: {
    sp:function(index){
          this.show=index;
      },
    back(){
      this.$router.back(-1);
    }
  },
  computed: {}
};
</script>

<style scoped>
.app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.goodsheader {
  width: 100%;
  height: 1rem;
  border-bottom: 0.01rem solid #f7f7f7;
  display: flex;  
}
.Back {
  margin-top: 3%;
  box-sizing: border-box;
  width: 0.58rem;
  height: 0.58rem;
  /* background: pink; */
  /* background: url("../assets/img/back.png") no-repeat center left; */
  background-size: 100%;
}
.Back img{
  width: 0.58rem;
  height: 0.58rem;
  margin-left: 0.2rem;
}
.nav {
  width: 75%;
  height: 100%;
  font-size: 0.36rem;
}
.nav ul {
  width: 100%;
  height: 100%;
  margin-left: 1.05rem;
}
.nav ul li {
  /* width: 0.9rem; */
  height: 100%;
  float: left;
  line-height: 1rem;
  margin-right: 0.9rem;
}
.active {
  border-bottom: 2px solid #fda208;
}
.shopcar {
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.15rem;
  margin-left: 0.3rem;
  background: url("../assets/img/shopcar.png") no-repeat center left;
  background-size: 100%;
}
</style>
